<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>滑动门效果2</title>
		<style type="text/css">
			body{
				background: #000;
			}
			.btn{
				width: 500px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				background: url(img/btn.png) repeat-x;
			}
			.btnL{
				background: url(img/btnL.png) no-repeat;
			}
			.btnR{
				height: 30px;
				background: url(img/btnR.png) no-repeat right center;
			}
		</style>
	</head>
	<body>
		<!--
			背景渐变图
			图片只有1px的渐变色, 要铺满整个容器,使用repeat-x | repeat-y;
		-->
		<div class="btn">
			<div class="btnL">
				<div class="btnR">
					web前端
				</div>
			</div>
		</div>
	</body>
</html>
